<template>
    <div class="welcome-banner">
        <div class="banner-content">
            <h1>欢迎回到集大校友平台</h1>
            <p>连接校友情谊，共创美好未来</p>
            <el-button type="primary" @click="$emit('complete-profile')" v-if="!profileComplete">
                完善个人资料
            </el-button>
        </div>
        <div class="banner-stats">
            <div class="stat-item">
                <div class="stat-number">{{ stats.totalUsers }}</div>
                <div class="stat-label">注册用户</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">{{ stats.totalPosts }}</div>
                <div class="stat-label">总动态数</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">{{ stats.totalCircles }}</div>
                <div class="stat-label">总圈子数</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">{{ stats.totalAlumnis }}</div>
                <div class="stat-label">总校友数</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { usePostsStore } from '@/stores/posts'
import { useCirclesStore } from '@/stores/circles'
import { useAlumniStore } from '@/stores/alumni'

const userStore = useUserStore()
const postStore = usePostsStore()
const circleStore = useCirclesStore()
const alumniStore = useAlumniStore()
// 统计数据
const stats = reactive({
    totalUsers: 12458,
    totalCircles: 2347,
    totalPosts: 356,
    totalAlumnis: 0,
})
defineProps({
    profileComplete: {
        type: Boolean,
        default: false
    },
    stats: {
        type: Object,
        default: () => ({
            totalUsers: '0',
            activeToday: '0',
            newPosts: '0'
        })
    }
})

defineEmits(['complete-profile'])

const getUserTotal = async () => {
    const result = await userStore.getUserListAction()
    stats.totalUsers = result.data.pagination.total
}

const getPostTotal = async () => {
    const result = await postStore.fetchPosts()
    stats.totalPosts = result.data.pagination.total
}

const getCircleTotal = async () => {
    const result = await circleStore.fetchCirclesAction()
    stats.totalCircles = result.data.pagination.total
}

const getAlumniTotal = async () => {
    const result = await alumniStore.fetchAlumnisAction()
    stats.totalAlumnis = result.data.pagination.total
}

onMounted(() => {
    getUserTotal()
    getPostTotal()
    getCircleTotal()
    getAlumniTotal()
})
</script>

<style scoped>
.welcome-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 32px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.banner-content h1 {
    font-size: 28px;
    margin-bottom: 8px;
}

.banner-content p {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 16px;
}

.banner-stats {
    display: flex;
    gap: 40px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .welcome-banner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .banner-stats {
        gap: 20px;
    }
}
</style>